<template>
  <div class="business">
    <el-card>
      <el-form ref="form" label-width="80px" :model="form" :inline="true">
        <el-form-item label="企业编号" prop="eid">
          <el-input v-model="form.eid" />
        </el-form-item>
        <el-form-item label="企业名称" prop="name"
          ><el-input v-model="form.name"
        /></el-form-item>
        <el-form-item label="创建者" prop="username"
          ><el-input v-model="form.username"
        /></el-form-item>
        <el-form-item label="状态" prop="status" label-width="50px">
          <el-select v-model="form.status" placeholder="请选择" filterable>
            <el-option value="0" label="禁用"></el-option>
            <el-option value="1" label="启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="addClick">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="businessList" style="width: 100%">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <!-- （页码-1）*页容量+$index+1 -->
            {{ (pagination.page - 1) * pagination.size + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid" />
        <el-table-column label="企业名称" prop="name" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="状态" prop="status">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              active-color="#409eff"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="statusChange(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="editClick(row)">编辑</el-button>
            <el-button type="text" @click="statusChange(row)">{{
              row.status === 0 ? '启用' : '禁用'
            }}</el-button>
            <el-button type="text" @click="delClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          :current-page.sync="pagination.page"
          :page-sizes="[1, 10, 20, 30, 40]"
          :page-size.sync="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 弹框 -->
    <Add ref="add" :businessList="businessList" @getData="getData" />
  </div>
</template>

<script>
import {
  enterpriseList,
  enterpriseRemove,
  enterpriseStatus
} from '@/api/business'
import jsCookie from 'js-cookie'
import Add from './components/add.vue'
export default {
  components: {
    Add
  },
  data () {
    return {
      form: {
        eid: '', // 否string企业id
        name: '', // 否string企业名称
        username: '', // 否string用户名
        status: '', // 否string状态 1（启用） 0（禁用）
        page: 1, // 否string页码默认为1
        limit: 1 // 否string页尺寸默认为10
      },
      //   总条目数
      total: 100,
      pagination: {
        // 每页显示条目个数
        size: +jsCookie.get('business-size') || 1,
        // 当前页数
        page: 1
      },
      //  企业列表
      businessList: []
    }
  },
  methods: {
    // 页码大小改变
    handleSizeChange () {
      jsCookie.set('business-size', this.pagination.size)
      this.getData()
    },
    // 当前页改变
    handleCurrentChange () {
      this.getData()
    },
    // 获取企业列表
    async getData () {
      this.form.page = this.pagination.page
      this.form.limit = this.pagination.size
      // console.log('form', this.form)
      const res = await enterpriseList(this.form)
      this.businessList = res.data.items
      this.total = res.data.pagination.total
      // console.log('企业列表', res)
    },
    // 新增弹框
    addClick () {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 删除企业
    delClick (row) {
      this.$confirm(`您确定要删除${row.name}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '点错了',
        type: 'warning'
      })
        .then(async () => {
          await enterpriseRemove(row)
          this.$message.success('删除成功')
          if (this.pagination.page > 1 && this.businessList.length <= 1) {
            this.pagination.page--
          }
          this.getData()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 编辑企业
    editClick (row) {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 状态设置
    async statusChange (row) {
      await enterpriseStatus({
        id: row.id,
        status: row.status
      })
      this.$message.success('改变企业状态成功')
      this.getData()
    },
    // 搜索
    search () {
      this.getData()
    },
    // 清除
    clear () {
      this.form = {
        eid: '', // 否string企业id
        name: '', // 否string企业名称
        username: '', // 否string用户名
        status: '', // 否string状态 1（启用） 0（禁用）
        page: 1, // 否string页码默认为1
        limit: 1 // 否string页尺寸默认为10
      }
      this.getData()
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.business {
  height: 100%;
  padding: 10px;
  .el-card {
    background-color: #fff;
    .el-form {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .el-form-item {
        ::v-deep .el-form-item__label {
          font-weight: 400;
        }
      }
    }
  }
  .pagination {
    margin: 0px;
    background-color: #fff;
    margin-top: 20px;
    text-align: center;
  }
}
</style>
